<template>
  <div class="pad-out-box new-table-style relative-box">
    <option-list ref="option"></option-list>
    <el-table :border="false" stripe :data="tableData">
      <el-table-column align="left" label="标题" prop="title"> </el-table-column>
      <el-table-column align="left" label="待办类型" prop="type" width="120"> </el-table-column>
      <el-table-column align="left" label="发起时间" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="发起人" width="200">
        <template slot-scope="scope">
          {{scope.row.projectName ? scope.row.projectName + '-' + scope.row.sender : scope.row.sender}}
        </template>
      </el-table-column>
      <el-table-column align="left" label="操作" width="80">
        <template slot-scope="scope">
          <el-button type="text" @click="tableClick(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-if="total" @change="pageChange" :total="total" paginationLayout="total, prev, pager, next" />
  </div>
</template>
<script>
  import { apiTodoList } from '../../api/workTrace';
  import optionList from './components/optionList';
  import workTrace from "../../mixin/workTrace"
  export default {
    mixins:[workTrace],
    data() {
      return {
        tableData: [],
        total: 0,
        currentPage: 1,
        pageSize: 10,
      };
    },

    mounted() {
      this.getDataSource();
    },

    watch: {
      '$store.state.todoNum': {
        handler (value) {
          console.log(value, 'value')
          this.getDataSource('more')
        },
        deep: true
      }
    },
    methods: {
      async getDataSource(more) {
        let res = await apiTodoList({
          currentPage: more ? this.currentPage : 1,
          pageSize: this.pageSize,
          action: 'todo',
        });
        this.tableData = res.rows || [];
        this.total = res.total || 0;
        this.$store.state.todoNum = this.total
      },

      tableClick(row) {
        if (row.pcDetailUrl) {
          let url = window.location.origin + row.pcDetailUrl + '&applyUser=' + row.sender + '&applyUserKey=' + row.senderkey;
          window.open(url);
        }
      },

      //分页
      pageChange(page) {
        this.currentPage = page.currentPage;
        this.getDataSource('more');
      },
    },

    components:{optionList}
  };
</script>

<style lang="scss" scoped>
.option-box{
  min-width:130px;
  position:absolute;
  right:0;
  top: -40px;
  background: #ffffff;
  z-index: 99;
  padding:10px 0;
  border-radius:10px;
  box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.1);
  cursor:pointer;
  .option-item{
    width:100%;
    text-align:center;
    line-height:35px;
  }
  .option-item:hover{
    background:#ecf5ff;
    color:#66b1ff;
  }
}
</style>
